<template>
  <div class="productList">
    <!-- 顶部导航栏 -->
    <van-nav-bar
      right-text="按钮"
      @click-left="onClickLeft"
      @click-right="onClickRight"
    >
      <template #left>
        <div>
          <van-icon class-prefix="iconfont" name="31fanhui1"></van-icon>
        </div>
      </template>
      <template #title>
        <div>
          <van-search
            class="autoW"
            v-model="value"
            placeholder="请输入搜索关键词"
            icon-prefix="iconfont"
            left-icon="wxbsousuotuiguang"
            shape="round"
          />
        </div>
      </template>
      <template #right>
        <div>
          <van-icon class-prefix="iconfont" name="gengduo1"></van-icon>
        </div>
      </template>
    </van-nav-bar>
    <!-- 排序栏 -->
    <van-grid
      direction="horizontal"
      icon-size="16px"
      :border="false"
      :center="false"
    >
      <van-grid-item class="imgRight" text="默认排序" />
      <van-grid-item class="imgRight" icon="arrow-up" text="升序" />
      <van-grid-item class="imgRight" icon="arrow-down" text="降序" />
      <van-grid-item
        class="imgRight"
        icon-prefix="iconfont"
        icon="fenlei01"
        text="筛选"
      />
    </van-grid>
    <!-- 商品列表 -->
    <lazy-component>
      <van-grid
        center
        direction="horizontal"
        icon-size="88"
        :border="false"
        column-num="1"
      >
        <van-grid-item
          class="productLists"
          v-for="item in productList.list"
          :key="item.id"
          :icon="item.imageHost + item.mainImage"
        >
          <template #text>
            <div class="contentText">
              <span>{{ item.name }}</span
              ><br />
              <span>{{ item.subtitle }}</span
              ><br />
              <div class="clearfix">
                <div class="fi">
                  <span>{{ item.price }}</span
                  >&nbsp;<del>￥{{ item.originalPrice }}</del>
                </div>
                <span class="ri">{{ item.stock }}</span>
              </div>
            </div>
          </template>
        </van-grid-item>
      </van-grid>
    </lazy-component>

    <!-- flex-direction: row -->
  </div>
</template>

<script>
import Vue from 'vue';
import {
  NavBar, Toast, Icon, Search, Grid, GridItem, Lazyload,
} from 'vant';
import { getProductList } from '@/api/public/productList.js';

Vue.use(Lazyload, {
  lazyComponent: true,
});
Vue.use(Grid)
  .use(GridItem)
  .use(NavBar)
  .use(Icon)
  .use(Search);
export default {
  data() {
    return {
      value: null,
      productList: [],
    };
  },
  created() {
    getProductList((res) => {
      this.productList = res.data;
      console.log(this.productList);
    });
  },
  methods: {
    onClickLeft() {
      Toast('返回');
    },
    onClickRight() {
      Toast('按钮');
    },
  },
};
</script>

<style lang="scss" scoped>
.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  *zoom: 1;
}
.autoW {
  width: 350px;
}
.contentText {
  flex-grow: 2;
  margin: 0 5px;
}
</style>


<style lang="scss" scoped>
.productList /deep/ {
  .van-ellipsis {
    max-width: none;
  }
  .imgRight .van-grid-item__content--horizontal {
    flex-direction: row-reverse;
  }
  .productLists {
    margin: 2px 0;
    .van-grid-item__content--horizontal {
      background-color: rgb(241, 241, 241);
      justify-content: start;
    }
  }
}
/deep/ {
  .le {
    float: left;
  }
  .ri {
    float: right;
  }
}
</style>
